<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>良心有限医疗预约平台</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.8/dist/chart.umd.min.js"></script>
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">

  <!-- Tailwind 配置 -->
  <script>
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            primary: '#165DFF',
            secondary: '#36CFC9',
            accent: '#FF7D00',
            neutral: '#F2F3F5',
            dark: '#1D2129',
          },
          fontFamily: {
            inter: ['Inter', 'sans-serif'],
          },
        }
      }
    }
  </script>

  <style type="text/tailwindcss">
    @layer utilities {
      .card-shadow {
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
      }
    }
  </style>
</head>

<body class="font-inter bg-gray-50 text-dark">
<main class="min-h-screen">
  <!-- 顶部导航 -->
  <nav class="bg-white shadow-sm">
    <div class="container mx-auto px-4 py-4 flex justify-between items-center">
      <a href="/" class="flex items-center">
        <i class="fa fa-heartbeat text-primary text-2xl mr-2"></i>
        <span class="text-xl font-bold">良心有限医疗</span>
      </a>
      <div class="flex items-center space-x-4">
        <a href="/moxiang/homeb" class="text-gray-600 hover:text-primary transition-colors">
          <i class="fa fa-home mr-1"></i>首页
        </a>
        <a href="/moxiang/appointment" class="text-gray-600 hover:text-primary transition-colors">
          <i class="fa fa-calendar mr-1"></i>预约
        </a>
        <a href="#" class="text-gray-600 hover:text-primary transition-colors">
          <i class="fa fa-user mr-1"></i>个人中心
        </a>
      </div>
    </div>
  </nav>

  <!-- 预约成功内容 -->
  <section class="py-12">
    <div class="container mx-auto px-4 sm:px-6 lg:px-8">
      <div class="max-w-4xl mx-auto">
        <!-- 成功提示 -->
        <div class="bg-white rounded-xl shadow-sm p-8 mb-8 text-center">
          <div class="w-20 h-20 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-6">
            <i class="fa fa-check text-green-500 text-3xl"></i>
          </div>
          <h1 class="text-2xl font-bold mb-2">预约成功</h1>
          <p class="text-gray-600 mb-6">您的预约已提交成功，请按时就诊</p>
          <div class="bg-primary/5 text-primary px-4 py-3 rounded-lg inline-block mb-6">
            <span class="font-medium">预约号：</span>
            <span id="appointmentNumber">YY20240615001</span>
          </div>
          <div class="flex justify-center space-x-4">
            <a href="/moxiang/homeb" class="px-6 py-2 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-50 transition-colors">
              <i class="fa fa-home mr-2"></i>返回首页
            </a>
            <a href="#" class="px-6 py-2 bg-primary text-white rounded-lg hover:bg-primary/90 transition-colors">
              <i class="fa fa-print mr-2"></i>打印预约单
            </a>
          </div>
        </div>

        <!-- 预约信息卡片 -->
        <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-8">
          <!-- 预约详情 -->
          <div class="bg-white rounded-xl shadow-sm p-6 lg:col-span-2">
            <h2 class="text-lg font-semibold mb-4 border-b pb-2">预约详情</h2>
            <div class="space-y-4">
              <form class="space-y-4" action="/moxiang/lists" method="post">
                <!-- 检查列表是否为空 -->
                <div th:if="${not #lists.isEmpty(patientList)}">
                  <div class="grid grid-cols-2 gap-4">
                    <div>
                      <p class="text-sm text-gray-500 mb-1">患者姓名</p>
                      <!-- 假设 Patient 对象有 name 属性 -->
                      <p id="patientName" class="font-medium" th:text="${patientList[0].patientname}"></p>
                    </div>
                    <div>
                      <p class="text-sm text-gray-500 mb-1">手机号码</p>
                      <!-- 假设 Patient 对象有 phone 属性 -->
                      <p id="patientPhone" class="font-medium" th:text="${patientList[0].patientphon}"></p>
                    </div>
                  </div>
                </div>

                <!-- 列表为空时的提示 -->
<!--                <div th:unless="${not #lists.isEmpty(patientList)}">-->
<!--                  <p class="text-red-500">未找到患者数据</p>-->
<!--                </div>-->
              </form>
              <div class="grid grid-cols-2 gap-4">
                <div>
                  <p class="text-sm text-gray-500 mb-1">预约科室</p>
                  <p id="appointmentDepartment" class="font-medium">心内科</p>
                </div>
                <div>
                  <p class="text-sm text-gray-500 mb-1">预约医生</p>
                  <p id="appointmentDoctor" class="font-medium">治不活医生 (主任医师)</p>
                </div>
              </div>
              <div class="grid grid-cols-2 gap-4">
                <div>
                  <p class="text-sm text-gray-500 mb-1">预约时间</p>
                  <p id="appointmentDateTime" class="font-medium">2024-06-18 09:00-09:30</p>
                </div>
                <div>
                  <p class="text-sm text-gray-500 mb-1">挂号费用</p>
                  <p id="appointmentFee" class="font-medium">￥200</p>
                </div>
              </div>
            </div>
          </div>

          <!-- 医生信息 -->
          <div class="bg-white rounded-xl shadow-sm p-6">
            <h2 class="text-lg font-semibold mb-4 border-b pb-2">医生信息</h2>
            <div class="flex items-start">
              <img src="https://picsum.photos/80/80?random=5" alt="医生照片" class="w-16 h-16 rounded-full object-cover mr-4">
              <div>
                <h3 id="doctorName" class="font-medium">治不活医生</h3>
                <p id="doctorTitle" class="text-sm text-primary mb-2">主任医师</p>
                <div class="flex items-center mb-1">
                  <div class="flex text-yellow-400 text-xs">
                    <i class="fa fa-star"></i>
                    <i class="fa fa-star"></i>
                    <i class="fa fa-star"></i>
                    <i class="fa fa-star"></i>
                    <i class="fa fa-star-half-o"></i>
                  </div>
                  <span class="ml-1 text-xs text-gray-500">4.8 (120评价)</span>
                </div>
                <p id="doctorSpecialty" class="text-xs text-gray-500">擅长：冠心病、心力衰竭</p>
              </div>
            </div>
          </div>
        </div>

        <!-- 就诊指引 -->
        <div class="bg-white rounded-xl shadow-sm p-6 mb-8">
          <h2 class="text-lg font-semibold mb-4 border-b pb-2">就诊指引</h2>
          <div class="space-y-4">
            <div class="flex">
              <div class="flex-shrink-0 bg-primary/5 text-primary rounded-full w-8 h-8 flex items-center justify-center mr-3">
                <i class="fa fa-map-marker"></i>
              </div>
              <div>
                <h3 class="font-medium mb-1">就诊地点</h3>
                <p class="text-sm text-gray-600">门诊大楼3楼心内科诊区，请根据现场指引牌前往</p>
              </div>
            </div>
            <div class="flex">
              <div class="flex-shrink-0 bg-primary/5 text-primary rounded-full w-8 h-8 flex items-center justify-center mr-3">
                <i class="fa fa-clock-o"></i>
              </div>
              <div>
                <h3 class="font-medium mb-1">就诊时间</h3>
                <p class="text-sm text-gray-600">请于预约时间前15分钟到达诊区签到，迟到可能导致顺延就诊</p>
              </div>
            </div>
            <div class="flex">
              <div class="flex-shrink-0 bg-primary/5 text-primary rounded-full w-8 h-8 flex items-center justify-center mr-3">
                <i class="fa fa-file-text-o"></i>
              </div>
              <div>
                <h3 class="font-medium mb-1">携带材料</h3>
                <p class="text-sm text-gray-600">请携带身份证、医保卡(如有)及既往检查报告</p>
              </div>
            </div>
            <div class="flex">
              <div class="flex-shrink-0 bg-primary/5 text-primary rounded-full w-8 h-8 flex items-center justify-center mr-3">
                <i class="fa fa-exclamation-triangle"></i>
              </div>
              <div>
                <h3 class="font-medium mb-1">注意事项</h3>
                <p class="text-sm text-gray-600">如需取消预约，请至少提前24小时操作，否则挂号费不予退还</p>
              </div>
            </div>
          </div>
        </div>

        <!-- 温馨提示 -->
        <div class="bg-blue-50 border border-blue-100 rounded-xl p-6">
          <div class="flex items-start">
            <i class="fa fa-info-circle text-blue-500 text-xl mr-3 mt-1"></i>
            <div>
              <h3 class="font-medium text-blue-800 mb-2">温馨提示</h3>
              <p class="text-sm text-blue-700">
                1. 您可以在"个人中心-我的预约"中查看或取消预约<br>
                2. 就诊当天请凭预约短信或预约号到自助机取号<br>
                3. 如有任何问题，请拨打服务热线：400-444-4444
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
</main>

<!-- 页脚 -->
<footer class="bg-white border-t py-8">
  <div class="container mx-auto px-4 sm:px-6 lg:px-8">
    <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
      <div>
        <h3 class="text-lg font-semibold mb-4">关于我们</h3>
        <ul class="space-y-2 text-sm text-gray-600">
          <li><a href="#" class="hover:text-primary transition-colors">医院简介</a></li>
          <li><a href="#" class="hover:text-primary transition-colors">专家团队</a></li>
          <li><a href="#" class="hover:text-primary transition-colors">医院环境</a></li>
        </ul>
      </div>
      <div>
        <h3 class="text-lg font-semibold mb-4">就医指南</h3>
        <ul class="space-y-2 text-sm text-gray-600">
          <li><a href="#" class="hover:text-primary transition-colors">门诊流程</a></li>
          <li><a href="#" class="hover:text-primary transition-colors">住院指南</a></li>
          <li><a href="#" class="hover:text-primary transition-colors">医保政策</a></li>
        </ul>
      </div>
      <div>
        <h3 class="text-lg font-semibold mb-4">健康服务</h3>
        <ul class="space-y-2 text-sm text-gray-600">
          <li><a href="#" class="hover:text-primary transition-colors">健康科普</a></li>
          <li><a href="#" class="hover:text-primary transition-colors">体检中心</a></li>
          <li><a href="#" class="hover:text-primary transition-colors">远程医疗</a></li>
        </ul>
      </div>
      <div>
        <h3 class="text-lg font-semibold mb-4">联系我们</h3>
        <ul class="space-y-2 text-sm text-gray-600">
          <li><i class="fa fa-map-marker mr-2"></i> 张伟鸿良心有限公司</li>
          <li><i class="fa fa-phone mr-2"></i> 400-888-8888</li>
          <li><i class="fa fa-envelope-o mr-2"></i> service@hospital.com</li>
        </ul>
      </div>
    </div>
    <div class="border-t mt-8 pt-8 text-center text-sm text-gray-500">
      <p>© 2025 良心医疗预约平台 </p>
    </div>
  </div>
</footer>

<script>
  // 从URL参数获取预约信息（模拟）
  document.addEventListener('DOMContentLoaded', function() {
    // 这里应该是从URL参数或API获取实际预约数据
    // 以下是模拟数据展示

    // 模拟从URL获取参数
    const urlParams = new URLSearchParams(window.location.search);
    const appointmentId = urlParams.get('id') || 'YY20240615001';

    // 设置预约信息
    document.getElementById('appointmentNumber').textContent = appointmentId;

    // 其他信息可以从localStorage或后端API获取
    // 这里只是示例，实际应用中应该从数据库获取真实数据
    const appointmentData = {
      patientName: document.getElementById('patientName').textContent,
      patientPhone: document.getElementById('patientPhone').textContent,
      department: '心内科',
      doctor: '治不活',
      title: '主任医师',
      date: '2024-06-18',
      time: '09:00-09:30',
      fee: '200',
      doctorSpecialty: '擅长：冠心病、心力衰竭'
    };

    // 填充数据到页面
    document.getElementById('appointmentDepartment').textContent = appointmentData.department;
    document.getElementById('appointmentDoctor').textContent = `${appointmentData.doctor}医生 (${appointmentData.title})`;
    document.getElementById('appointmentDateTime').textContent = `${appointmentData.date} ${appointmentData.time}`;
    document.getElementById('appointmentFee').textContent = `￥${appointmentData.fee}`;
    document.getElementById('doctorName').textContent = `${appointmentData.doctor}医生`;
    document.getElementById('doctorTitle').textContent = appointmentData.title;
    document.getElementById('doctorSpecialty').textContent = appointmentData.doctorSpecialty;
  });
</script>
</body>
</html>